<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城首页</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/home.css">
</head>

<body>
  <!-- 顶部导航 -->
  <div class="topbar">
    <div class="container topbar-in cf">
      <div class="topbar-nav fl">
        <a href="">小米官网</a>
        <span>|</span>
        <a href="">小米商城</a>
        <span>|</span>
        <a href="">小米商城</a>
        <span>|</span>
        <a href="">小米商城</a>
        <span>|</span>
        <a href="">小米商城</a>
        <span>|</span>
        <a href="">小米商城</a>
      </div>
      <div class="user-shop fr m-l10">
        购物车
      </div>
      <div class="topbar-nav fr">
        <a href="">登录</a>
        <span>|</span>
        <a href="">注册</a>
        <span>|</span>
        <a href="">消息通知</a>
      </div>


    </div>
  </div>

  <!-- 导航头 -->
  <div class="header">

    <div class="container cf">
      <h1 class="logo fl">小米商城</h1>
      <div class="menu fl">

        <ul class="ul-fl cf">
          <li><a href="">xiaomi手机</a></li>
          <li><a href="">Redmi手机</a></li>
          <li><a href="">电视</a></li>
          <li><a href="">笔记本</a></li>
          <li><a href="">路由</a></li>
          <li><a href="">平板</a></li>
          <li><a href="">服务中心</a></li>
          <li><a href="">社区</a></li>
        </ul>
      </div>
      <div class="search-box fr">
        <form action="">
          <input class="search-text" type="text" placeholder="洗衣机">
          <button class="search-btn">搜</button>
        </form>
      </div>
    </div>
  </div>

  <!-- banner -->
  <div class="banner">

    <div class="container banner-in">

      <div class="swiper-box">

        <div class="sp-btn sp-left">
          <span class="iconfont icon-arrow-left"></span>
        </div>
        <div class="sp-btn sp-right">
          <span class="iconfont icon-arrow-right"></span>
        </div>
      </div>
      <!-- 分类列表 -->
      <div class="cate-box">
        <ul>
          <li class="cf">
            <span class="fl sl">手机</span><span class="fr iconfont icon-arrow-right-bold"></span>
          </li>
          <li class="cf"><span class="fl sl">手机</span> <span class="fr iconfont icon-arrow-right-bold"></span> </li>
          <li class="cf"><span class="fl sl">手机</span><span class="fr iconfont icon-arrow-right-bold"></span></li>
          <li class="cf"><span class="fl sl">手机</span><span class="fr iconfont icon-arrow-right-bold"></span></li>
          <li class="cf"><span class="fl sl">手机</span><span class="fr iconfont icon-arrow-right-bold"></span></li>
          <li class="cf"><span class="fl sl">手机</span><span class="fr iconfont icon-arrow-right-bold"></span></li>
          <li class="cf"><span class="fl sl">手机</span><span class="fr iconfont icon-arrow-right-bold"></span></li>
          <li class="cf"><span class="fl sl">手机</span><span class="fr iconfont icon-arrow-right-bold"></span></li>
          <li class="cf"><span class="fl sl">手机</span><span class="fr iconfont icon-arrow-right-bold"></span></li>
          <li class="cf"><span class="fl sl">手机</span><span class="fr iconfont icon-arrow-right-bold"></span></li>
        </ul>
      </div>

      <!-- 分类详情 -->
      <div class="cate-details shadow2 cf">
        <div class="cate-details-item fl">
          <ul>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>立式空调 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>

        </div>
        <div class="cate-details-item fl">
          <ul>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>立式空调 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>

        </div>
        <div class="cate-details-item fl">
          <ul>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>立式空调 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
            <li><a href=""><img src="./images/cate-detail.webp" alt=""><span>Redmi Watch 4</span></a></li>
          </ul>
        </div>
      </div>



    </div>
  </div>


  <!-- section_pro_list -->
  <div class="section_pro_list">
    <div class="container cf">
      <div class="tag-links fl">
        <ul class="ul-fl cf">
          <li>
            <a href="">
              <img src="./images/hotag.png" alt="">
              <p>保障服务</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./images/hotag.png" alt="">
              <p>保障服务</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./images/hotag.png" alt="">
              <p>保障服务</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./images/hotag.png" alt="">
              <p>保障服务</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./images/hotag.png" alt="">
              <p>保障服务</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./images/hotag.png" alt="">
              <p>保障服务</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="spro spro1 fl">
        <a href="">
          <img src="./images/99.png" alt="">
        </a>
      </div>
      <div class="spro spro2 fl">
        <a href="">
          <img src="./images/99.png" alt="">
        </a>
      </div>
      <div class="spro spro3 fl">
        <a href="">
          <img src="./images/99.png" alt="">
        </a>
      </div>
    </div>


  </div>

  <!-- 广告位 -->
  <div class="adv">
    <div class="container">
      <a href="">
        <img src="./images/99.png" alt="">
      </a>
    </div>
  </div>

  <!-- section -->
  <div class="section">
    <div class="container">
      <div class="section_header cf">
        <h2 class="title fl">智能穿戴</h2>
        <div class="s-tabs fr">
          <a href="">耳机</a><a href="">手表</a>
        </div>
      </div>
      <div class="section_content cf">
        <div class="scl-box fl"></div>
        <div class="scr-box fr">
          <ul class="ul-fl cf">
            <li class="tf">
              <img src="./images/cate-detail.webp" alt="">
              <h3>手表</h3>
              <p class="shop-info-tags">多彩金属机身 | 高精度运动健康监测 | 21天超耐久续航</p>
              <p class="shop-info-price"> <span>29</span>元 </p>
            </li>
            <li class="tf">
              <img src="./images/cate-detail.webp" alt="">
              <h3>手表</h3>
              <p class="shop-info-tags">多彩金属机身 | 高精度运动健康监测 | 21天超耐久续航</p>
              <p class="shop-info-price"> <span>29</span>元 </p>
            </li>
            <li class="tf">
              <img src="./images/cate-detail.webp" alt="">
              <h3>手表</h3>
              <p class="shop-info-tags">多彩金属机身 | 高精度运动健康监测 | 21天超耐久续航</p>
              <p class="shop-info-price"> <span>29</span>元 </p>
            </li>
            <li class="tf">
              <img src="./images/cate-detail.webp" alt="">
              <h3>手表</h3>
              <p class="shop-info-tags">多彩金属机身 | 高精度运动健康监测 | 21天超耐久续航</p>
              <p class="shop-info-price"> <span>29</span>元 </p>
            </li>
            <li class="tf">
              <img src="./images/cate-detail.webp" alt="">
              <h3>手表</h3>
              <p class="shop-info-tags">多彩金属机身 | 高精度运动健康监测 | 21天超耐久续航</p>
              <p class="shop-info-price"> <span>29</span>元 </p>
            </li>
            <li class="tf">
              <img src="./images/cate-detail.webp" alt="">
              <h3>手表</h3>
              <p class="shop-info-tags">多彩金属机身 | 高精度运动健康监测 | 21天超耐久续航</p>
              <p class="shop-info-price"> <span>29</span>元 </p>
            </li>
            <li class="tf">
              <img src="./images/cate-detail.webp" alt="">
              <h3>手表</h3>
              <p class="shop-info-tags">多彩金属机身 | 高精度运动健康监测 | 21天超耐久续航</p>
              <p class="shop-info-price"> <span>29</span>元 </p>
            </li>
            <li class="src-li-last">
              <div class="sll-box tf"></div>
              <div class="sll-box tf"></div>
            </li>
          </ul>

        </div>
      </div>

    </div>
  </div>

  <!-- 网站底部 -->
  <div class="site-footer"></div>

  <!-- 网站信息 -->
  <div class="site-info"></div>
</body>

</html>